<template>
	<view :style="{background: `#f7f8fc url(${imageBaseUrl}/matchbigbj.png) no-repeat top center / 100% 520rpx`}">
		<view class="ReportDetails">
			<view class="ReportDetailsTop">
				<image class="ReportDetailsTopImg" :src="`${imageBaseUrl}/reportimg2.png`"></image>
				<view class="ReportDetailsTops">
					<image src="/static/images/reportimg3.png"></image>
					<view class="ReportDetailsTopsText">3分钟前有人评估</view>
				</view>
				<view class="ReportDetailsTopc">
					<view class="ReportDetailsTopcCount">{{report.matchPolicy.score}}</view>
					<view class="ReportDetailsTopcText">分</view>
					<image src="/static/images/shangjian.png"></image>
				</view>
				<view class="ReportDetailsTopx">政策适配指数评估</view>
			</view>
			<view class="GuideDetailsBot ReportDetailsBot">
				<view class="GuideDetailsBotTabs">
					<view :class="['GuideDetailsBotTabsLi', activeIndex === index ? 'on' : '']"
						v-for="(item, index) in ['报告详情', '政策原文']" @click="activeIndex = index">{{ item }}</view>
				</view>
				<view class="GuideDetailsBotEnd">
					<report v-if="activeIndex === 0" :score="report.matchPolicy.score" />
					<original :policyId="policyId" v-if="activeIndex === 1" />
				</view>
			</view>
			<rightFixedReport />
		</view>
	</view>
</template>

<script>
	import report from './components/report.vue';
	import original from './components/original.vue';
	import rightFixedReport from '@/pages/components/rightFixedReport.vue'
	export default {
		components: {
			report,
			original,
			rightFixedReport
		},
		data() {
			return {
				activeIndex: 0,
				report: {}, // 匹配报告
				policyId: 0
			};
		},
		computed: {
			imageBaseUrl() {
				return this.$IMAGE_BASE_URL;
			}
		},
		methods: {},
		created() {
			this.report = uni.getStorageSync("curReport");
			this.policyId = this.report.policyId;
		}
	}
</script>

<style lang="scss">
	.ReportDetails {
		position: relative;

		.ReportDetailsTop {
			height: 294rpx;
			padding: 30rpx 24rpx 0;
			box-sizing: border-box;

			.ReportDetailsTopImg {
				position: absolute;
				right: 0;
				top: 54rpx;
				width: 304rpx;
				height: 226rpx;
			}

			.ReportDetailsTops {
				display: flex;
				align-items: center;
				width: 255rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 40rpx;
				background: #1160d3;
				justify-content: flex-start;
				box-sizing: border-box;
				padding-left: 9rpx;

				image {
					width: 34rpx;
					height: 34rpx;
				}

				.ReportDetailsTopsText {
					font-size: 24rpx;
					color: #ffffff;
					margin-left: 13rpx;
				}
			}

			.ReportDetailsTopc {
				display: flex;
				padding: 30rpx 0 0;
				justify-content: flex-start;

				.ReportDetailsTopcCount {
					font-size: 82rpx;
					color: #ffffff;
				}

				.ReportDetailsTopcText {
					font-size: 28rpx;
					color: #ffffff;
					margin: 60rpx 22rpx 0;
				}

				image {
					width: 21rpx;
					height: 29rpx;
					margin: 65rpx 0 0;
				}
			}

			.ReportDetailsTopx {
				font-size: 32rpx;
				color: #ffffff;
				padding: 10rpx 0 0;
			}
		}

		.GuideDetailsBot {
			.GuideDetailsBotTabs {
				display: flex;
				justify-content: space-between;
				background: url("/static/images/guidebuj1.png") no-repeat bottom center / 100% 94rpx;

				.GuideDetailsBotTabsLi {
					width: 411rpx;
					height: 110rpx;
					font-size: 32rpx;
					color: #5e646b;
					line-height: 110rpx;
					text-align: center;

					&:nth-child(1) {
						&.on {
							background: url("/static/images/guidebuj2.png") no-repeat bottom center / 411rpx 110rpx;
						}
					}

					&:nth-child(2) {
						&.on {
							background: url("/static/images/guidebuj3.png") no-repeat bottom center / 411rpx 110rpx;
						}
					}
				}
			}

			// .GuideDetailsBotEnd{
			// 	padding: 0 24rpx;
			// }
		}
	}
</style>